<!-- src/components/ExperimentUnityWrapper.vue -->
<template>
  <!--<div style="height: 100%;background-color: red;"></div>-->
    <!-- 嵌入 Unity 导出页面，实际路径根据构建输出确定 -->
  <div id="unity-container">
    <el-button v-if="!loadSimulator" size="large" type="primary" @click="loadSimulator = !loadSimulator">加载模拟器</el-button>
    <iframe v-else src="/unity-build/index.html" frameborder="0" style="width:100%; height:100%;"></iframe>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
const emit = defineEmits(['experimentData'])
const loadSimulator = ref(false)

onMounted(() => {
  window.addEventListener('message', event => {
    // 根据实际情况验证消息来源
    if (event.origin !== window.location.origin) return
    const data = event.data
    console.log('收到 Unity 数据', data)
    emit('experimentData', data)
  })
})
</script>

<style scoped>
#unity-container {
  width: 100%;
  height: 100%;
  align-content: center;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>
